<template>
  <el-card shadow="never" class="border-0">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="关键词">
            <el-input
              v-model="searchForm.keyword"
              placeholder="管理员昵称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="8">
          <div class="flex items-center justify-end">
            <el-button type="primary" @click="getData">搜索</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <!-- 新增|刷新 -->
    <AddHeader @create="handleCreate" @getData="getData" />
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column label="管理员" width="200">
        <template #default="{ row }">
          <div class="flex items-center">
            <el-avatar :size="40" :src="row.avatar">
              <img
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              />
            </el-avatar>
            <div class="ml-3">
              <h6>{{ row.username }}</h6>
              <small>ID:{{ row.id }}</small>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="所属管理员" align="center">
        <template #default="{ row }">
          {{ row.role.name || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <el-switch
            :modelValue="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="updataStatus($event, row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            text
            @click="handleEdit(scope.row)"
            >修改</el-button
          >

          <el-popconfirm
            title="是否要删除该管理员？"
            confirmButtonText="确认"
            cancelButtonText="取消"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button text type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex items-center justify-center mt-5">
      <el-pagination
        background
        layout="prev, pager ,next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>

    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
      >
        <el-form-item label="username" prop="username">
          <el-input v-model="form.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item label="password" prop="password">
          <el-input v-model="form.password" placeholder="password"></el-input>
        </el-form-item>

        <el-form-item label="avatar" prop="avatar">
          <el-input v-model="form.avatar" placeholder="avatar"></el-input>
        </el-form-item>
        <el-form-item label="role_id" prop="role_id">
          <el-select v-model="form.role_id" placeholder="Select">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="status" prop="status">
          <el-switch v-model="form.status" />
        </el-form-item>
      </el-form>
    </FormDrawer>
  </el-card>
</template>
<script setup>
import { ref } from 'vue'
import FormDrawer from '@/components/FormDrawer.vue'
import AddHeader from '@/components/AddHeader.vue'
import {
  getManagerList,
  createManager,
  updateManager,
  deleteManager,
  updateManagerStatus,
} from '@/api/manager.js'
import { useInitTable, useInitForm } from '@/composables/useCommon'

const roles = ref([])

const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  currentPage,
  total,
  getData,
} = useInitTable({
  getData: getManagerList,
  searchForm: {
    keyword: '',
  },
  onGetListSuccess: (res) => {
    roles.value = res.data.roles
  },
})

const {
  formDrawerRef,
  formRef,
  form,
  editId,
  drawerTitle,
  handleSubmit,
  handleCreate,
  handleEdit,
  handleDelete,
} = useInitForm({
  getData,
  update: updateManager,
  create: createManager,
  delete: deleteManager,
  defaultForm: {
    username: '',
    password: '',
    role_id: 0,
    status: 1,
    avatar: '',
  },
  rules: {
    username: [
      {
        required: true,
        message: '用户名',
        trigger: 'blur',
      },
    ],
    password: [
      {
        required: true,
        message: '密码',
        trigger: 'blur',
      },
    ],
    role_id: [
      {
        required: true,
        message: '请选择角色',
      },
    ],
  },
})

// 修改状态
const updataStatus = (status, id) => {
  updateManagerStatus(id, status).then((res) => {
    getData(currentPage.value)
  })
}

// let n = ref(1)
// const { add } = useAdd()       // n++
// const { reduce } = useReduce() // n--
</script>
